<template>
    <div id="workbench">
     
        <div class="yest">
            <ul>
                <li>
                    <div class="jine">
                        <img src="../image/昨日成交额.png" alt="" />
                    </div>
                    <div class="image_jine">
                        <img src="../image/金额.png" alt="" />
                    </div>
                    <div class="text_jine">
                        <span>￥</span><span class="text_one">123&nbsp; 529</span><span>元</span>
                    </div>
                </li>
                <li>
                    <div class="yest_cj">
                        <img src="../image/昨日成交额.png" alt="" />
                    </div>
                    <div class="image_jine">
                        <img src="../image/订单.png" alt="" />
                    </div>
                    <div class="text_jine">
                        <span class="text_one">3&nbsp;529</span><span>单</span>
                    </div>
                </li>
                <li>
                    <div class="yest_cj">
                        <img src="../image/昨日新增会员.png" alt="" />
                    </div>
                    <div class="image_jine">
                        <img src="../image/会员.png" alt="" />
                    </div>
                    <div class="text_jine">
                        <span class="text_one">529</span><span>个</span>
                    </div>
                </li>
                <li>
                    <div class="yest_cj">
                        <img src="../image/昨日新增产品.png" alt="" />
                    </div>
                    <div class="image_jine">
                        <img src="../image/产品.png" alt="" />
                    </div>
                    <div class="text_jine">
                        <span class="text_one">529</span><span>个</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="inquire">
            <div class="search">
                <img src="../image/竖线.png" alt="" />
                <img src="../image/查询.png" alt="" />
            </div>
        </div>
        <!-- 最新品论 -->
        <div class="comment">
            <!-- 最新评论字样 -->
            <div class="newcomment">
                <img src="../image/竖线.png" alt="" />
                <img src="../image/最新评论.png" alt="" />
            </div>
            <!-- 查看全部字样 -->
            <div class="lookall" @click="goon">
                <img src="../image/查看全部.png" alt="">
            </div>
            <!-- 最新评论内容 -->
            <div class="comment_contenner">
                <ul>
                    <li v-for="(item ,index) in comment_list" :key="index">
                        <div class="scenic_name">
                            <span>{{item.id}} {{item.fullname}}</span>
                        </div>
                        <div class="delete_button">
                            <el-link type="danger" @click="delete_com(item)">删除</el-link>
                            <el-link type="primary">标星</el-link>
                        </div>
                        <div class="con_time">
                            <span>{{item.created_at}}</span>
                        </div>
                        <div class="brief">
                            <span>{{item.content}}</span>
                        </div>
                        <ul class="work_image">
                            <li v-for="(item,index) in imagelist" :key="index">
                                <img :src="item.img" alt="" />
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="productlist">
            <!-- 天气 -->
            <div class="sunny" :key="index" v-for="(item, index) in sunnylist">
                <div class="bigsun">
                    <img src="../image/大椭圆 .png" alt="" />
                </div>
                <div class="smallsun">
                    <img src="../image/小椭圆 .png" alt="" />
                </div>
                <div class="user_sunny">
                    <img src="../image/人员.png" alt="" />
                    <span class="username">Yean,上午好!</span>
                </div>
                <div class="degree"><span class="degree_limit">{{item.temperature}}</span><i>℃</i></div>
                <div class="weather">
                    <span>{{item.weather}}</span>
                </div>
                <div class="week">
                    <span>星期{{week | fileWeek}}</span>
                </div>
                <div class="time">
                    <span>{{item.reporttime}}</span>
                </div>
                <div class="area"><span>{{item.province}}</span>&nbsp;<span>{{item.city}}</span></div>
            </div>
            <div class="newproduct">
                <div class="newproduct_header">
                    <img src="../image/竖线.png" alt="">
                    <img src="../image/最新产品.png" alt="">
                </div>
                <div class="newproduct_lookall" @click="goon_productlist">
                    <img src="../image/查看全部.png" alt="">

                </div>
                <div class="productlist_pro">
                    <ul>
                        <li v-for="(item,index) in productlist" :key="index"><span>{{item.productname}}</span><i>{{item.fullname}}</i></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { getcommentsList, getdeleteComment ,getproductLists} from "../request/index"
    export default {
        data() {
            return {
                week: new Date().getDay(),
                sunnylist: [],
                comment_list: [],
                imagelist: [],
                productlist:[]
            };
        },
        filters: {
            fileWeek(v) {
                var a = new Array("日", "一", "二", "三", "四", "五", "六");
                return a[v]
            }
        },
        methods: {
            //获取全部商品列表
            getproductLists(){
                getproductLists().then(res=>{
                    console.log(res);
                    this.productlist=res.list
                })
            },
            //查看全部商品列表
            goon_productlist(){
                this.$router.push("/shoplist")
            },
            //删除评论
            delete_com(item) {
                // console.log(1111);
                let data = {
                    id: item.id,
                    type: 1,
                }
                getdeleteComment(data).then(res => {
                    console.log(res);
                    this.$message({
                        message: "删除成功",
                        type: "success",
                    });
                    this.getcommentsList()
                })
            },
            //获取评论列表
            getcommentsList() {
                getcommentsList().then(res => {
                    console.log(res);
                    this.comment_list = res.list
                    this.imagelist = res.list
                })
            },
            //获取北京天气
            getweather() {
                fetch(
                    "https://restapi.amap.com/v3/weather/weatherInfo?city=110112&key=285178b454905e24abeaad1f7ef5b92e",
                    {
                        method: "get",
                        "Access-Control-Allow-Origin": "*",
                        "Access-Control-Allow-Credentials": true,
                        headers: {
                            "Content-Type": "application/json",
                        },
                    }
                ).then((res) => {
                    //   console.log(res);
                    res.json().then((data) => {
                        console.log(data.lives);
                        this.sunnylist = data.lives
                        console.log(this.sunnylist);

                    });
                });
            },
            goon() {
                // console.log(111);
                this.$router.push("/comment")
            }
        },
        mounted() {
            this.getweather()
            this.getcommentsList()
            this.getproductLists()
        }
    };
</script>
<style scoped>
    .productlist_pro>ul>li>i{
        margin-left: 150px;
    }
    .productlist_pro>ul>li>span{
        font-weight: 700;
        font-size: 13px;
    }
    .productlist_pro>ul>li{
        padding: 13px 0;
        margin-left: 15px;
    }
    .productlist_pro{
        width: 390px;
        height: 560px;
        margin: 10px auto;
        /* background-color: skyblue; */
    }
    .newproduct_lookall{
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
    }
    .newproduct_header{
        margin-top: 10px;
        margin-left: 10px;
    }
    .work_image>li>img {
        width: 100%;
        height: 100%;
    }

    .work_image>li {
        width: 50px;
        height: 50px;
        background-color: #ccc;
        margin-top: 20px;
        float: left;
        margin-left: 10px;
    }

    .brief {
        margin-left: 10px;
        margin-top: 10px;
    }

    .con_time {
        margin-left: 10px;
        margin-top: 10px;
    }

    .delete_button {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .scenic_name {
        margin-top: 10px;
        margin-left: 10px;
    }

    .scenic_name>span {
        font-size: 16px;
        font-weight: 700;
    }

    .comment_contenner>ul>li {
        width: 563px;
        height: 180px;
        /* background-color: pink; */
        float: left;
        margin: 10px 10px;
        border: 1px solid #F7F8FC;
        position: relative;
    }

    .lookall {
        position: absolute;
        right: 20px;
        top: 20px;
        cursor: pointer;
    }

    .area {
        position: absolute;
        right: 19px;
        bottom: 27px;
    }

    .area>span {
        color: #e7f0ff;
    }

    .time {
        position: absolute;
        right: 10px;
        bottom: 51px;
    }

    .time>span {
        color: #e7f0ff;
    }

    .week {
        position: absolute;
        bottom: 27px;
        right: 166px;
    }

    .week>span {
        color: #e7f0ff;
        font-size: 16px;
    }

    .weather {
        position: absolute;
        bottom: 49px;
        right: 200px;
    }

    .weather>span {
        color: #e7f0ff;
    }

    .degree {
        position: absolute;
        top: 100px;
        left: 54px;
    }

    .degree_limit {
        font-size: 40px;
        color: #fff;
    }

    .degree>i {
        color: #fff;
    }

    .user_sunny {
        position: absolute;
        top: 29px;
        left: 30px;
    }

    .username {
        color: #fff;
        font-size: 16px;
    }

    .smallsun {
        position: absolute;
        top: 15px;
        right: 85px;
    }

    .bigsun {
        position: absolute;
        right: 40px;
        top: 20px;
    }

    .comment_contenner {
        width: 1170px;
        height: 400px;
        /* background-color: skyblue; */
        margin-left: 15px;
        margin-top: 15px;
    }

    .newcomment {
        margin-top: 20px;
        margin-left: 16px;
    }

    .search {
        margin-top: 20px;
        margin-left: 20px;
    }

    .text_jine {
        margin-top: 50px;
        margin-left: 20px;
    }

    .text_one {
        font-size: 30px;
    }

    .jine {
        margin-top: 20px;
        margin-left: 15px;
    }

    .yest_cj {
        margin-top: 20px;
        margin-left: 15px;
    }

    .image_jine {
        position: absolute;
        right: 10px;
        bottom: 10px;
    }

    #workbench {
        width: 1680px;
        position: relative;
        height: 800px;
        /* background-color: skyblue; */
        margin-top: 10px;
        overflow: hidden;
    }

    .yest {
        width: 1200px;
        height: 150px;
        /* background-color: yellowgreen; */
        margin-left: 20px;
    }

    .inquire {
        width: 1200px;
        height: 150px;
        background-color: #fff;
        margin-left: 20px;
        margin-top: 15px;
        overflow: hidden;
    }

    .comment {
        width: 1200px;
        height: 470px;
        background-color: #fff;
        margin-left: 20px;
        margin-top: 15px;
        overflow: hidden;
        position: relative;
    }

    .productlist {
        width: 400px;
        height: 780px;
        /* background-color: yellow; */
        position: absolute;
        top: 0;
        right: 20px;
    }

    .sunny {
        width: 400px;
        height: 160px;
        position: relative;
        background-image: url("../image/天气北京.png");
        border-radius: 5px;

        /* background-size:85%;   */
        /* background-size:cover;  
         */
        background-size: contain;
    }

    .newproduct {
        width: 400px;
        height: 620px;
        background-color: #fff;
        margin-top: 20px;
        overflow: hidden;
        position: relative;
    }

    .yest>ul {
        display: flex;
        justify-content: space-between;
    }

    .yest>ul>li {
        width: 280px;
        height: 150px;
        background-color: #fff;

        position: relative;
    }
</style>